<!-- header -->
<header>
	<div class="wrapper">
		<h1><a href="index.php" id="logo"></a></h1>

		<?php include 'top_menu.php' ?>
	</div>
	<div class="relative">
		<div id="gallery">
			<ul id="myRoundabout">
				<li onclick ="search(this);"><img  src="images/promo_tatry_hover.png" alt="" onmouseout="changeImage(this, 'images/promo_tatry_hover.png');" onmouseover="changeImage(this, 'images/promo_tatry.png')">
				</li>
				<li onclick ="search(this);"><img  src="images/promo_morze_hover.png" alt="" onmouseout="changeImage(this, 'images/promo_morze_hover.png');" onmouseover="changeImage(this, 'images/promo_morze.png')">
				</li>
				<li onclick ="search(this);"><img  src="images/promo_bieszczady_hover.png" alt="" onmouseout="changeImage(this, 'images/promo_bieszczady_hover.png');" onmouseover="changeImage(this, 'images/promo_bieszczady.png')">
				</li>
				<li onclick ="search(this);"><img  src="images/promo_mazury_hover.png" alt="" onmouseout="changeImage(this, 'images/promo_mazury_hover.png');" onmouseover="changeImage(this, 'images/promo_mazury.png')">
				</li>
			</ul>

		</div>
	</div>
</header>
<script>
    function search(element) {
        var elementClass = element.getAttribute("class");

        if (elementClass.indexOf("roundabout-in-focus") != -1) {
             $("#offertSearchResults").fadeIn(900);
             $("#searcherContent").fadeOut(300);       
             
              $('html, body').animate({
                scrollTop : ($("#offertSearchResults").offset().top - 500)
             }, 1);    
        }
    }
</script>
<!-- / header-->